<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <title>邻阿姨(LAY.COM)-去哪买,超市比价,附近价差排行,邻居互助</title>
    <link rel="stylesheet" type="text/css" href="../js/cube-ui/cube.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/upperShelf.css"/>
</head>
<body>
    <div class="app-shell" id="upperShelf" v-cloak>
        <div class="upperShelf-main">
            <div class="upperShelf-header"><i class="upperShelf-goback" @click="goback()">返回</i>{{headerTitle}}
                <span class="upperShelf-history" v-if="showType === 1" @click="goHistory">历史</span>
                <span class="upperShelf-history" v-else-if="showType === 4" @click="historyScreen">筛选</span>
            </div>

            <!-- 商品分类 -->
            <div class="upperShelf-container" v-if="showType === 0">
                <div class="upperShelf-marketBox">
                    <div class="upperShelf-market">{{market.marketName}}</div>
                    <div class="upperShelf-changeMarket" @click="changeMarket">{{changeMarketTitle}}</div>
                </div>

                <div class="upperShelf-scrollNavBox">
                    <div class="upperShelf-scrollNavLeft">
                        <cube-scroll>
                            <cube-tab-bar class="upperShelf-firstCategoryTab" v-model="secondId" :data="tabs" @change="changeHandler"></cube-tab-bar>
                        </cube-scroll>
                    </div>
                    <div class="upperShelf-scrollNavRight">
                        <cube-scroll ref="scroll">
                            <ul>
                                <li v-for="(item, index) in secondCategoryData" :key="index" @click="changeSecondTab(index, item)">
                                    <div class="upperShelf-secondCategoryName">{{item.name}}</div>
                                    <div v-if="index === thirdIndex">
                                        <ul class="upperShelf-thirdCategoryBox">
                                            <li class="upperShelf-thirdCategory" v-for="(third, index) in thirdCategoryData" :key="index" @click="clickCategory(third)">
                                                <img :src="third.logo" class="upperShelf-categoryImg">
                                                <p class="upperShelf-thirdCategoryName">{{third.name}}</p>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </cube-scroll>
                    </div>
                </div>
            </div>

            <!-- 按商品分类搜索 -->
            <div class="upperShelf-container upperShelf-listContainer" v-else-if="showType === 1">
                <div class="upperShelf-marketBox">
                    <div class="upperShelf-market">{{market.marketName}}</div>
                    <div class="upperShelf-changeMarket" @click="changeMarket">{{changeMarketTitle}}</div>
                </div>
                <div class="upperShelf-topInputBox"><form action="javascript:void(0);"><input type="search" v-model="key" placeholder="请输入搜索内容" class="upperShelf-topInput" @keypress="keySearch"></form></div>
                <div class="upperShelf-goodsHeader">
                    <div class="upperShelf-goodsTab" v-for="(tab,index) in sortTab" :key="index" :class="{'upperShelf-goodsTabActive': index === tabIndex}" @click="changeTab(index)">
                        <span :class="{'upperShelf-goodsTabPrice': index === 1}">{{tab.title}}
                            <i class="upperShelf-goodsTabArrowUp" :class="{'upperShelf-goodsTabArrowUpActive': orderType === 'PRICE_UP'}" v-if="index === 1"></i>
                            <i class="upperShelf-goodsTabArrowDown" :class="{'upperShelf-goodsTabArrowDownActive': orderType === 'PRICE_DOWN'}" v-if="index === 1"></i>
                        </span>
                    </div>
                </div>
                <div class="upperShelf-goodsListBox">
                    <cube-scroll ref="goodsScroll" :data="searchData" :options="scrollOptions" @pulling-up="searchMore">
                        <ul v-if="searchData && searchData.length > 0">
                            <li v-for="(goods, index) in searchData" :key="index" class="upperShelf-goodsDataBox">
                                <img :src="goods.image" class="upperShelf-goodsImg">
                                <div class="upperShelf-goodsInfo">
                                    <h1 class="upperShelf-goodsName">{{goods.fullName}}</h1>
                                    <div class="upperShelf-priceBox">
                                        <span class="upperShelf-price">{{goods.goodsPrice}}</span>
                                        <span>价差率：<span class="upperShelf-priceDifference">{{goods.spreadRate}}</span></span>
                                    </div>
                                    <div class="upperShelf-goodsBarcode">条码：{{goods.barcode}}</div>
                                    <div class="upperShelf-royalty">提成金额：￥{{goods.royaltyAmount}}</div>
                                    <cube-button class="upperShelf-btnCcorrection" :inline="true" :primary="true" @click="btnCorrection(goods)">{{goods.btnText}}</cube-button>
                                </div>
                            </li>
                        </ul>
                        <div v-else-if="searchData && searchData.length === 0" class="upperShelf-prompt">暂无商品</div>
                    </cube-scroll>
                </div>

                <div class="upperShelf-btnScan" @click="WeChatScan">扫一扫</div>

                <cube-button :primary="true" class="upperShelf-btnPaid" @click="btnUpperShelf">有偿上架</cube-button>
            </div>

            <!-- 价格纠错 -->
            <div class="upperShelf-container upperShelf-formContainer" v-else-if="showType === 2">
                <div class="upperShelf-correctionBox">
                    <div class="upperShelf-correctionGoodsBox">
                        <img :src="correctionGoods.image" class="upperShelf-historyGoodsImg">
                        <div class="upperShelf-goodsInfo">
                            <h1 class="upperShelf-goodsName">{{correctionGoods.name}}</h1>
                            <div class="upperShelf-historyGoodsPrice">
                                <span class="upperShelf-price">{{correctionGoods.price}}</span>
                                <span class="upperShelf-historyBarcode">条码：{{correctionGoods.barcode}}</span>
                            </div>
                            <div class="upperShelf-historyRoyalty">提成金额：￥{{correctionGoods.royaltyAmount}}</div>
                        </div>
                    </div>
                    <div>
                        <ul>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">价格类型：</span><div class="upperShelf-correctionListLiRight" @click="changePriceType">{{params.priceType}}</div></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">开始时间：</span><div class="upperShelf-correctionListLiRight" @click="changeStartAndEndTime">{{params.startTime}}</div></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">结束时间：</span><div class="upperShelf-correctionListLiRight" @click="changeStartAndEndTime">{{params.endTime}}</div></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">纠错价格：</span><input type="number" class="upperShelf-correctionListLiRight" v-model.trim="showPrice" placeholder="请输入价格（元）"></li>
                        </ul>
                    </div>
                </div>
                <!-- <div class="auditPrice-correctionUploadBox">
                    <div class="auditPrice-correctionImgBox">
                        <input type="file" class="auditPrice-uploadFile" @change="showImage($event)" ref="correctionUploadFile" multiple accept="image/*"/>
                        <span class="auditPrice-uploadText">点击上传照片</span>
                        <img :src="imageSrc" v-if="imageSrc" class="auditPrice-imagePrview"/>
                    </div>
                </div> -->

                <cube-button :primary="true" :disabled="btnDisabled" class="upperShelf-btnPaid" @click="correctionSumbit">完成</cube-button>
            </div>

            <!-- 有偿上架 -->
            <div class="upperShelf-container upperShelf-formContainer" v-else-if="showType === 3">
                <div class="upperShelf-correctionBox">
                    <div>
                        <ul>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">商品名称：</span><input type="text" class="upperShelf-correctionListLiRight" v-model.trim="upperShelfParams.name" placeholder="请输入商品名称"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">品牌：</span><input type="text" class="upperShelf-correctionListLiRight" v-model.trim="upperShelfParams.brand" placeholder="请输入品牌名"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">价格：</span><input type="number" class="upperShelf-correctionListLiRight" v-model.trim="showPrice" placeholder="请输入价格（元）"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">规格：</span><input type="text" class="upperShelf-correctionListLiRight" v-model.trim="upperShelfParams.specification" placeholder="请输入规格"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">商品描述：</span><input type="text" class="upperShelf-correctionListLiRight" v-model.trim="upperShelfParams.description" placeholder="请输入商品描述"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">条码：</span><input type="number" class="upperShelf-correctionListLiRight" v-model.trim="upperShelfParams.barcode" placeholder="请输入商品条码"></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">价格类型：</span><div class="upperShelf-correctionListLiRight" @click="choicePriceType">{{upperShelfParams.priceType}}</div></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">开始时间：</span><div class="upperShelf-correctionListLiRight" @click="choiceStartAndEndTime">{{upperShelfParams.startTime}}</div></li>
                            <li class="upperShelf-correctionListLi"><span class="upperShelf-correctionListLiLeft">结束时间：</span><div class="upperShelf-correctionListLiRight" @click="choiceStartAndEndTime">{{upperShelfParams.endTime}}</div></li>
                        </ul>
                    </div>
                    <div class="auditPrice-correctionUploadBox">
                        <div class="auditPrice-correctionImgBox">
                            <input type="file" class="auditPrice-uploadFile" @change="upperShelfShowImage($event)" ref="uploadFile" multiple accept="image/*"/>
                            <span class="auditPrice-uploadText">点击上传照片</span>
                            <img :src="imageSrc" v-if="imageSrc" class="auditPrice-imagePrview"/>
                        </div>
                    </div>
                </div>

                <cube-button :primary="true" :disabled="btnDisabled" class="upperShelf-btnPaid" @click="btnUpperShelfSumbit">完成</cube-button>
            </div>

            <!-- 历史 -->
            <div class="upperShelf-container" v-else-if="showType === 4">
                <div class="upperShelf-marketBox">
                    <div class="upperShelf-market">{{historyMarket.marketName}}</div>
                    <div class="upperShelf-changeMarket" @click="changeMarket">{{historyMarketTitle}}</div>
                </div>
                <cube-tab-bar class="upperShelf-historyTab"
                    v-model="historyTabLabel" show-slider
                    :data="historyTab"
                    @click="historyHandler">
                    <cube-tab v-for="item in historyTab" :label="item.label" :key="item.label">{{item.label}}</cube-tab>
                </cube-tab-bar>
                <div class="upperShelf-historyListBox">
                    <cube-slide
                        ref="historySlide"
                        :loop="loop"
                        :initial-index="initialIndex"
                        :auto-play="autoPlay"
                        :show-dots="showDots"
                        :options="slideOptions"
                        @change="changeHistoryTab">
                        <cube-slide-item>
                            <cube-scroll ref="upperShelfHistory" :data="upperShelfHistoryData" :options="scrollOptions" @pulling-up="upperShelfHistoryMore">
                                <ul class="upperShelf-historyUl" v-if="upperShelfHistoryData && upperShelfHistoryData.length > 0">
                                    <li class="upperShelf-historyBox" v-for="(item, index) in upperShelfHistoryData" :key="index">
                                        <div class="upperShelf-historyHeader"><span>{{item.createTime}}</span><span class="upperShelf-orange">{{item.status}}</span></div>
                                        <div class="upperShelf-historyGoodsBox">
                                            <img :src="item.image" class="upperShelf-historyGoodsImg">
                                            <div class="upperShelf-historyGoodsInfo">
                                                <h1 class="upperShelf-historyGoodsName">{{item.name}}</h1>
                                                <div class="upperShelf-historyGoodsPrice"><span>{{item.price}}</span><span class="upperShelf-historyBarcode">条码：{{item.barcode}}</span></div>
                                                <div class="upperShelf-historyRoyalty">提成金额：￥{{item.commissionAmount}}</div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div v-else-if="upperShelfHistoryData && upperShelfHistoryData.length === 0" class="upperShelf-prompt">暂无历史记录</div>
                            </cube-scroll>
                        </cube-slide-item>
                        <cube-slide-item>
                            <cube-scroll ref="correctionHistory" :data="correctionHistoryData" :options="scrollOptions" @pulling-up="correctionHistoryMore">
                                <ul class="upperShelf-historyUl" v-if="correctionHistoryData && correctionHistoryData.length > 0">
                                    <li class="upperShelf-historyBox" v-for="(item, index) in correctionHistoryData" :key="index">
                                        <div class="upperShelf-historyHeader"><span>{{item.createTime}}</span><span class="upperShelf-orange">{{item.status}}</span></div>
                                        <div class="upperShelf-historyGoodsBox">
                                            <img :src="item.goodsImage" class="upperShelf-historyGoodsImg">
                                            <div class="upperShelf-historyGoodsInfo">
                                                <h1 class="upperShelf-historyGoodsName">{{item.fullName}}</h1>
                                                <div class="upperShelf-historyGoodsPrice"><span>{{item.price}}</span><span class="upperShelf-historyBarcode">条码：{{item.barcode}}</span></div>
                                                <div class="upperShelf-royalty">提成金额：￥{{item.royaltyAmount}}</div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                                <div v-else-if="correctionHistoryData && correctionHistoryData.length === 0" class="upperShelf-prompt">暂无历史记录</div>
                            </cube-scroll>
                        </cube-slide-item>
                    </cube-slide>
                </div>
            </div>

            <!-- 右侧选择超市弹窗 -->
            <cube-popup type="my-popup" position="right" :mask-closable="true" ref="choiceMarket">
                <div class="upperShelf-choiceMarketBox">
                    <div class="upperShelf-choiceMarketTitle">选择超市</div>
                    <div class="upperShelf-choiceMarketInputBox">
                        <input type="text" class="upperShelf-choiceMarketInput" v-model="marketKey" placeholder="请输入超市名">
                    </div>
                    <div class="upperShelf-marketListBox">
                        <cube-scroll ref="marketData" :data="marketData" :options="scrollOptions" @pulling-up="marketDataMore">
                            <ul v-if="marketData && marketData.length > 0">
                                <li class="upperShelf-marketList" v-for="(item,index) in marketData" :key="index" @click="choiceMarket(item)">
                                    <h1 class="upperShelf-marketListName" v-html="item.name"></h1>
                                    <p class="upperShelf-marketAddress">{{item.fullName}}</p>
                                </li>
                            </ul>
                            <div class="upperShelf-noMarket" v-else-if="marketData && marketData.length === 0">暂无结果</div>
                        </cube-scroll>
                    </div>
                </div>
            </cube-popup>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/fetch20190612.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/cube-ui/cube.min.js"></script>
    <script src="/js/jweixin-1.4.0.js"></script>
    <script src="js/upperShelf.js"></script>
</body>
</html>
